<template>
    <div class="box">
        <div class="top">
            <van-nav-bar title="订单详情" left-text="" left-arrow @click-left="$router.go(-1)" />
        </div>
        <div class="content">
            <div style="width: 100%;height: 100px;background-color: pink;">
                <h3 style="color: white;margin: 20px;margin-top: 20px;">等待买家付款</h3>

                <p style="color: white;margin: 20px;">
                  
                        <van-count-down :time="time" />
                        后自动取消订单
                  
                   
                    <van-button type="default"
                        style="background-color: pink;color: white;border: 2px solid;margin-left: 20px;">取消订单</van-button>
                </p>
                <div>
                    <van-contact-card type="edit" name="张三" tel="13000000000" :editable="false" />
                </div>
                <div>
                    <van-card num="2" price="29.58" desc="描述信息" title="商品标题"
                        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                        <template #tags>
                            <van-tag plain type="primary">标签</van-tag>
                            <van-tag plain type="primary">标签</van-tag>
                        </template>
                        <template #footer>
                            <van-button size="mini">按钮</van-button>
                            <van-button size="mini">按钮</van-button>
                        </template>
                    </van-card>
                </div>
                <div>
                    <van-submit-bar :price="2958" button-text="付款" @submit="onSubmit" @click="$router.push('/order')"/>
                </div>
            </div>
            <ul>
                <li v-for="item in list" :key="item.id" @click="$router.push('/detail/' + item.id)">
                    <div>
                        <img :src="item.image" alt="">
                    </div>
                    <p>{{ item.title }}</p>
                    <p style="color: red;">￥{{ item.price }}</p>
                </li>
            </ul>
        </div>

    </div>
</template>
<script setup>
import request from '@/utils/request'
import { ref, onMounted } from 'vue'
const list = ref({})
onMounted(() => {
    request.get('/detail', {
        params: { pagination: 1, pageNum: 40 }
    }).then(res => {
        if (res.data.code == 200) {
            console.log(res.data.data);
            list.value = res.data.data
        }

    })
})



    const time = ref(30 * 60 * 60 * 1000);
    // return { time };

</script>